<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <!--# vue.js支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤，经常用于格式化文本，比如字母全部大写，货币千位使用逗号分隔等。过滤的规则是自定义的，通过给vue实例添加选项filters来设置，例如对显示时间的格式化处理 #-->
        {{date | formatDate}}
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
        let myData = {
            date: new Date()
        };
        // 月份、日期、小时等小于10前面补0
        let padDate = (value => {
            return value < 10 ? '0' + value : value;
        })
        let vm = new Vue({
            el: "#box",
            data: myData,  // data当前时间
            filters: {
                formatDate: (value => {
                    let date = new Date(value);
                    let year = date.getFullYear();
                    let month = padDate(date.getMonth() + 1);
                    let day = padDate(date.getDate());
                    let hours = padDate(date.getHours());
                    let minutes = padDate(date.getMinutes());
                    let seconds = padDate(date.getSeconds());
                    return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
                })
            },
            //实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用
            created: function () {
            },
            //el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
            mounted: function () {
                let thiss = this; //声明一个变量指向Vue实例this，保证作用域一致
                this.timer = setInterval(function () {
                    thiss.date = new Date(); //修改数据date
                }, 1000)
            },
            //实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等
            beforeDestroy: function () {
                if (this.timer) {
                    clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
                }
            }
        })
    </script>
</body>

</html>